<template>
  <div>
    <!--header-->
    <headers></headers>
    <!--header end-->

    <div class="top-banner brand-banner">
      <div class="banner-inner">
        <h1>品牌荣誉</h1>
        <p>专业呈现价值，价值汇聚品牌</p>
      </div>
    </div>

    <div class="brand-container">
      <div class="brand-sub-container">
        <div class="panel-title">
          <div class="panel-title-first">
            <span class="title-line"></span>
            <h1>战略合作伙伴</h1>
            <span class="title-line"></span>
          </div>
        </div>
        <div class="brand-partner">
          <div class="brand-partner-item">
            <div class="partner-img">
              <img src="images/brand/4_p1.png" />
              <div class="partner-img-hover">
                <p>
                  由中科院物联网研究发展中心、中国城市科学研究会数字城市专业委员会、江苏省城市管理局、苏州市市容市政管理局、苏州太湖新城吴江管理委员会、成都小步创想慧联科技有限公司６家单位共同建设的江苏城市综合治理大数据研究基地在会上揭牌成立。
                </p>
              </div>
            </div>
            <p class="partner-depart">江苏大数据基地共建单位</p>
          </div>
          <div class="brand-partner-item">
            <div class="partner-img">
              <img src="images/brand/4_p2.png" />
              <div class="partner-img-hover">
                <p>
                  2012年，小步凭优秀的产品研发实力，成为CCTV战略合作伙伴，为央视新媒体战略打造【CCTV微视】产品，并荣获2015年度广播影视科技创新一等奖。
                </p>
              </div>
            </div>
            <p class="partner-depart">中国中央电视台战略合作伙伴</p>
          </div>
          <div class="brand-partner-item">
            <div class="partner-img">
              <img src="images/brand/4_p3.png" />
              <div class="partner-img-hover">
                <p>
                  小步创想联合中国移动从内容、渠道、产品等各个方面进行全方位战略合作。针对移动所服务的机关单位、事业单位等客群提供具有特色的小步产品。目前已在甘肃、陕西、辽宁等多个省份成功推广。
                </p>
              </div>
            </div>
            <p class="partner-depart">中国移动云战略合作伙伴</p>
          </div>
        </div>
      </div>

      <div class="brand-sub-container">
        <div class="panel-title">
          <div class="panel-title-first">
            <span class="title-line"></span>
            <h1>高新技术企业认证</h1>
            <span class="title-line"></span>
          </div>
        </div>
        <div class="brand-partner">
          <img
            src="images/brand/brand_gxqy.png"
            alt=""
            style="width: 630px;display: inline-block"
          />
        </div>
      </div>

      <div class="brand-sub-container">
        <div class="panel-title">
          <div class="panel-title-first">
            <span class="title-line"></span>
            <h1>荣誉展示</h1>
            <span class="title-line"></span>
          </div>
          <h2>小步创想近年来获得的奖项展示 (部分)</h2>
        </div>

        <div class="honor-img-big">
          <div class="show"><img src="images/brand/4_h1b.png" alt="" /></div>
          <div><img src="images/brand/4_h2b.png" alt="" /></div>
          <div><img src="images/brand/4_h3b.png" alt="" /></div>
          <div><img src="images/brand/4_h4b.png" alt="" /></div>
          <div><img src="images/brand/4_h5b.png" alt="" /></div>
          <div><img src="images/brand/4_h6b.png" alt="" /></div>
          <div><img src="images/brand/4_h7b.png" alt="" /></div>
        </div>
        <div class="honor-img-group">
          <div class="honor-cell">
            <div class="honor-cell-img">
              <img class="img-normal" src="images/brand/4_h1sn.png" alt="" />
              <img class="img-hover" src="images/brand/4_h1s.png" alt="" />
            </div>
            <p>2018年智慧城市管理<br />创新应用新锐奖</p>
          </div>
          <div class="honor-cell">
            <div class="honor-cell-img">
              <img class="img-normal" src="images/brand/4_h2sn.png" alt="" />
              <img class="img-hover" src="images/brand/4_h2s.png" alt="" />
            </div>
            <p>2016年中国好SaaS<br />最具投资价值SaaS团队</p>
          </div>
          <div class="honor-cell">
            <div class="honor-cell-img">
              <img class="img-normal" src="images/brand/4_h3sn.png" alt="" />
              <img class="img-hover" src="images/brand/4_h3s.png" alt="" />
            </div>
            <p>2015年度<br />广播影视科技创新奖</p>
          </div>
          <div class="honor-cell">
            <div class="honor-cell-img">
              <img class="img-normal" src="images/brand/4_h4sn.png" alt="" />
              <img class="img-hover" src="images/brand/4_h4s.png" alt="" />
            </div>
            <p>2016年中国好SaaS成都站<br />最具投资价值SaaS产品</p>
          </div>
          <div class="honor-cell">
            <div class="honor-cell-img">
              <img class="img-normal" src="images/brand/4_h5sn.png" alt="" />
              <img class="img-hover" src="images/brand/4_h5s.png" alt="" />
            </div>
            <p>2019"创响中国"首站暨菁蓉汇<br />雏鹰计划种子企业</p>
          </div>
          <div class="honor-cell">
            <div class="honor-cell-img">
              <img class="img-normal" src="images/brand/4_h6sn.png" alt="" />
              <img class="img-hover" src="images/brand/4_h6s.png" alt="" />
            </div>
            <p>ChinaBang Awards 2016<br />西南创新企业50强</p>
          </div>
          <div class="honor-cell">
            <div class="honor-cell-img">
              <img class="img-normal" src="images/brand/4_h7sn.png" alt="" />
              <img class="img-hover" src="images/brand/4_h7s.png" alt="" />
            </div>
            <p>2015中国软件<br />品牌500强</p>
          </div>
        </div>
      </div>

      <div class="brand-patent">
        <div class="brand-sub-container">
          <div class="panel-title">
            <div class="panel-title-first">
              <span class="title-line"></span>
              <h1>独创六项国家专利技术</h1>
              <span class="title-line"></span>
            </div>
            <!--                <h2>打造准确的出勤轨迹</h2>-->
          </div>
          <div class="patent-img-group">
            <div class="honor-cell">
              <img src="images/brand/4_t1.png" alt="" />
              <p>低功耗动态取点技术</p>
            </div>
            <div class="honor-cell">
              <img src="images/brand/4_t2.png" alt="" />
              <p>低频行为推测取点技术</p>
            </div>
            <div class="honor-cell">
              <img src="images/brand/4_t3.png" alt="" />
              <p>独有云解析定位技术</p>
            </div>
            <div class="honor-cell">
              <img src="images/brand/4_t4.png" alt="" />
              <p>多传感器运动识别技术</p>
            </div>
            <div class="honor-cell">
              <img src="images/brand/4_t5.png" alt="" />
              <p>行为挖掘机智能分析技术</p>
            </div>
            <div class="honor-cell">
              <img src="images/brand/4_t6.png" alt="" />
              <p>基于GIS人员行为的<br />可视化语义分析技术</p>
            </div>
          </div>
          <div class="patent-content">
            <!--                <h4>小步外勤独创六项国家专利技术</h4>-->
            <div class="patent-text lf">
              <p>一种基于地点挖掘的用户行为评估方法</p>
              <p>一种移动终端出行轨迹的确定方法</p>
              <p>在电子地图上进行信息点筛选的方法</p>
            </div>
            <img src="images/brand/4_tpic.png" />
            <div class="patent-text rt">
              <p>融合多传感器的地点识别方法</p>
              <p>基于地理围栏的人员管理方法</p>
              <p>适用于移动设备的信息跟踪管理方法</p>
            </div>
          </div>
        </div>
      </div>

      <div class="brand-sub-container">
        <div class="panel-title">
          <div class="panel-title-first">
            <span class="title-line"></span>
            <h1>软件产品相关证书</h1>
            <span class="title-line"></span>
          </div>
          <h2>
            我们秉持着“专业呈现价值，价值汇聚品牌”的信念，为企业提供更优质的移动信息化服务
          </h2>
        </div>
        <div class="certificate-img-group">
          <img src="images/brand/4_zp3.png" alt="" />
          <img src="images/brand/4_zp4.png" alt="" />
          <img src="images/brand/4_zp5.png" alt="" />
          <img src="images/brand/4_zp6.png" alt="" />
          <img src="images/brand/4_zp7.png" alt="" />
          <img src="images/brand/4_zp8.png" alt="" />
          <img src="images/brand/4_zp9.png" alt="" />
          <img src="images/brand/4_zp10.png" alt="" />
          <img src="images/brand/4_zp1.png" alt="" />
          <img src="images/brand/4_zp2.png" alt="" />
        </div>
      </div>
    </div>

    <div class="float-box">
      <div class="qq-advice">
        <a
          class="qq-advice-inner"
          href="http://wpa.qq.com/msgrd?v=3&uin=2366320826&site=qq&menu=yes"
          target="_blank"
        >
          <img src="images/public/advice_icon.png" />
          <span>在线咨询</span>
        </a>
        <div class="tel-advice">
          <div class="tel-icon"><img src="images/public/phone.png" /></div>
          <div class="tel-box">
            <img src="images/public/phone2.png" />
            <div class="tel-box-r">
              <p>咨询热线</p>
              <span>400-864-9582</span>
            </div>
          </div>
        </div>
      </div>

      <a class="back-top"></a>
    </div>

    <!--footer-->
    <footers></footers>
    <!--footer end-->
  </div>
</template>

<script>
import $ from "jquery";
import headers from "../component/headers";
import footers from "../component/footers";
export default {
  name: "brand",
  data() {
    return {};
  },
  components: {
    headers,
    footers,
  },
  methods: {
    bdshare() {
      $(function() {
        var share_target_url;
        var share_target_sharetitle;
        var share_target_shareabstract;

        $(".bdsharebuttonbox>a").mouseover(function() {
          var Tthis = $(this);
          var url = window.location.href;
          var oneurl;

          if ($(this).hasClass("popVideo")) {
            var url = "http://zf.xbcx.com.cn/shareVideo.php";
          } else {
            var url = window.location.href;
          }

          oneurl = url;
          if (url.indexOf("#") > 0) {
            oneurl = url.substring(0, url.indexOf("#"));
          }
          if (oneurl.indexOf("?") > 0) {
            share_target_url =
              oneurl +
              "&" +
              Tthis.data("suffixe") +
              "&video_id=" +
              Tthis.data("sharevideo");
          } else {
            share_target_url =
              oneurl +
              "?" +
              Tthis.data("suffixe") +
              "&video_id=" +
              Tthis.data("sharevideo");
          }
          share_target_sharetitle = Tthis.data("sharetitle");
          share_target_shareabstract = Tthis.data("shareabstract");
        });

        window._bd_share_config = {
          common: {
            onBeforeClick: function(cmd, config) {
              if (!share_target_url) {
                share_target_url = window.location.href;
              }
              config.bdUrl = share_target_url;
              config.bdText = share_target_sharetitle;
              config.bdDesc = share_target_shareabstract;
              return config;
            },
          },

          share: [
            {
              tag: "share_1",
              bdSize: 24,
            },
            {
              tag: "share_2",
              bdSize: 32,
            },
          ],
        };
      });
    },
    common() {
      //导航下拉菜单
      $(".header-nav-menu")
        .mouseenter(function() {
          var hasChild = $(this).find(".header-subnav").length;
          if (hasChild > 0) {
            $(this)
              .find(".header-subnav")
              .stop()
              .slideDown("fast");
          }
        })
        .mouseleave(function() {
          $(this)
            .find(".header-subnav")
            .stop()
            .slideUp("fast");
        });

      $(window).scroll(function() {
        if ($(window).scrollTop() > 0) {
          $(".header").addClass("scroll");
        } else {
          $(".header").removeClass("scroll");
        }
      });

      var scrollFun = function() {
        var width = ($(".scroll-container").width() - 60) / 4;
        $(".scroll-item").width(width);
        var img_len = $(".scroll-item").length;
        var img_wd = width;

        var num = 0;
        if (img_len < 5) {
          $(".scroll-next,.scroll-prev").hide();
          $(".scroll-container ul").css({
            width: "100%",
            "text-align": "center",
          });
        }
        if ($(".scroll-container ul li").length > 4) {
          $(".scroll-container ul").append($(".scroll-container ul").html());
        }

        $(".scroll-next").click(function() {
          if (num == img_len) {
            num = 0;
            $(".scroll-container ul").css("left", 0);
          }
          num++;
          move(-num);
        });

        $(".scroll-prev").click(function() {
          if (num == 0) {
            num = img_len;
            $(".scroll-container ul").css("left", -num * (img_wd + 13) + "px");
          }
          num--;
          move(-num);
        });

        function move(num) {
          $(".scroll-container ul")
            .stop()
            .animate({
              left: num * (img_wd + 13) + "px",
            });
        }
      };
      // scrollFun();
      autoRound(".honor-cell", ".honor-img-big div");
      autoRound(".about_team_peo", ".about_team_text");
      function autoRound(item, detail) {
        var $item = $(item);
        var $detail = $(detail);

        var i = 0;
        var length = $item.length;
        var t = setInterval(function() {
          i++;
          if (i == length) {
            i = 0;
          }
          $item
            .eq(i)
            .addClass("cur")
            .siblings()
            .removeClass("cur");
          $detail
            .eq(i)
            .addClass("show")
            .siblings()
            .removeClass("show");
        }, 4000);

        $item.mouseenter(function() {
          clearInterval(t);
          var i = $(this).index();
          $(this)
            .addClass("cur")
            .siblings()
            .removeClass("cur");
          $detail
            .eq(i)
            .addClass("show")
            .siblings()
            .removeClass("show");
        });

        $item.mouseleave(function() {
          var i = $(this).index();
          t = setInterval(function() {
            i++;
            if (i == length) {
              i = 0;
            }
            $item
              .eq(i)
              .addClass("cur")
              .siblings()
              .removeClass("cur");
            $detail
              .eq(i)
              .addClass("show")
              .siblings()
              .removeClass("show");
          }, 4000);
        });
      }

      indexBanner();
      function indexBanner() {
        var n = 0;
        var t = n;
        var width = $(".banner-inner-tab .tab-item").width();
        var count = $(".banner-inner-item").length;
        $(".banner-inner-tab .tab-line img").width(width);

        $(".banner-inner-tab .tab-item").click(function() {
          var i = $(this).index();
          n = i;
          if (i >= count) {
            return;
          }

          $(".banner-inner-item")
            .eq(i)
            .addClass("show")
            .siblings()
            .removeClass("show");
          $(".tab-line img").css({
            transform: "translateX(" + width * i + "px)",
          });
        });

        t = setInterval(showAuto, 8000);

        $(".banner-inner-tab").hover(
          function() {
            clearInterval(t);
          },
          function() {
            t = setInterval(showAuto, 8000);
          }
        );

        function showAuto() {
          n = n >= count - 1 ? 0 : ++n;
          $(".banner-inner-tab .tab-item")
            .eq(n)
            .trigger("click");
        }
      }

      $(".back-top").on("click", function() {
        $("body,html").animate({ scrollTop: 0 }, 500);
        return true;
      });

      $(".product-shouqi").click(function() {
        var w = $(".product-posit").width();
        $(".product-posit").css("margin-left", -w);
        setTimeout(function() {
          $(".product-zhankai").show();
          $(this).hide();
        }, 400);
      });
      $(".product-zhankai").click(function() {
        $(".product-posit").css("margin-left", 0);
        $(".product-shouqi").show();
        $(this).hide();
      });
    },
    video_player() {
      var palyers = {};
      window.TPlayer = {
        play: function(eleID, fileId, auto_play, size) {
          if (!size) {
            size = {
              width: 614,
              height: 381,
            };
          }
          var option = {
            auto_play: auto_play,
            file_id: fileId,
            app_id: "1252000488",
            width: size.width,
            height: size.height,
          };
          /*调用播放器进行播放*/
          palyers[eleID] = new qcVideo.Player(
            /*代码中的id_video_container将会作为播放器放置的容器使用, 可自行替换*/
            eleID,
            option
          );
          return palyers[eleID];
        },
        pasue: function(eleID) {
          palyers[eleID].pause();
        },
        pasueAll: function() {
          $.each(palyers, function(i, n) {
            n.pause();
          });
        },
        change: function(eleID, fileId, auto_play, size) {
          if (!palyers[eleID]) {
            this.play(eleID, fileId, auto_play, size);
          }
          palyers[eleID].changeVideo({
            app_id: "1252000488",
            file_id: fileId,
            auto_play: auto_play,
          });
        },
        livePlay: function(eleID, url, size) {
          //http://ptest-meeket.xbwq.com.cn/meeket/viewer/live/viewer/index?a=d722031322a3224696f5d6f63622c22283131322a3224696f5566796c622b7
          if (!size) {
            size = {
              width: 614,
              height: 381,
            };
          }
          if ($("iframe_" + eleID).length) {
            return;
          }
          $("#" + eleID).html(
            '<iframe id="iframe_' +
              eleID +
              '" src="' +
              url +
              "&is_full_play=1&v_height=" +
              size.height +
              '"' +
              'height="' +
              size.height +
              '" width="' +
              size.width +
              '" frameborder="0"></iframe>'
          );
        },
        liveStop: function(eleID) {
          $("#" + eleID).html("");
        },
      };
    },
  },
  mounted() {
    this.bdshare();
    this.common();
    this.video_player();
  },
};
</script>
